<template>
  <el-card>
    <template #header>
      <h2>管家【{{ managerName }}】 的服务客户</h2>
    </template>

    <el-row gutter="20">
      <!-- 可选客户 -->
      <el-col :span="12">
        <h3>可选客户</h3>
        <el-form :inline="true" :model="filters" class="toolbar">
          <el-form-item label="客户名">
            <el-input
              v-model="filters.name"
              placeholder="模糊搜索"
              clearable
            />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="fetchAvailable">查询</el-button>
          </el-form-item>
        </el-form>
        <el-table :data="available" stripe>
          <el-table-column prop="name" label="客户名" />
		  <el-table-column prop="age" label="年龄" width="80" />
		            <el-table-column label="性别" width="80">
		              <template #default="{ row }">
		                {{ row.gender === 0 ? '男' : '女' }}
		              </template>
		            </el-table-column>
		  <el-table-column prop="bedNumber" label="床位号" width="100" />
          <el-table-column label="操作" width="120">
            <template #default="{ row }">
              <el-button size="small" @click="addCustomer(row)">添加</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-col>

      <!-- 已分配 -->
      <el-col :span="12">
        <h3>已分配客户</h3>
        <el-table :data="assigned" stripe>
          <el-table-column prop="name" label="客户名" />
		   <el-table-column prop="age" label="年龄" width="80" />
		            <el-table-column label="性别" width="80">
		              <template #default="{ row }">
		                {{ row.gender === 0 ? '男' : '女' }}
		              </template>
		            </el-table-column>
		  <el-table-column prop="bedNumber" label="床位号" width="100" />
          <el-table-column prop="assignTime" label="分配时间" />
          <el-table-column label="操作" width="120">
            <template #default="{ row }">
              <el-button
                type="danger"
                size="small"
                @click="removeCustomer(row)"
              >移除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
  </el-card>
</template>

<script setup>
import { ref, reactive, onMounted, inject } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import qs from 'qs'
import dayjs from 'dayjs'
import { ElMessage } from 'element-plus'

const axios = inject('axios')
const route = useRoute()
const router = useRouter()

// 从 query 拿到管家信息
const managerId   = Number(route.query.managerId)
const managerName = route.query.managerName || ''

// 搜索条件
const filters = reactive({ name: '' })

// 可选 & 已分配 列表
const available = ref([])
const assigned  = ref([])

// 拉可选（无管家）客户
async function fetchAvailable() {
  const params = {
    name: filters.name,
    cur:  1,
    number: 9999
  }
  const { data: resp } = await axios.get(
    '/HealthManagerCustomerController/queryNoManager',
    { params }
  )
  available.value = resp.data
}

// 拉已分配客户
async function fetchAssigned() {
  const { data: resp } = await axios.get(
    '/HealthManagerCustomerController/queryByManager',
    { params: { managerId } }
  )
  // 假设后端返回的是 Customer + assignTime 字段
  assigned.value = resp.data
}

// 添加一条分配
async function addCustomer(row) {
  // 防重
  if (assigned.value.some(r => r.customerId === row.id)) {
    return ElMessage.warning('该客户已分配')
  }
  const payload = {
    healthManagerId: managerId,
    customerId:     row.id,
    assignTime:     dayjs().format('YYYY-MM-DD HH:mm:ss')
  }
  const { data: resp } = await axios.post(
    '/HealthManagerCustomerController/add',
    qs.stringify(payload)
  )
  if (resp.status === 200) {
    ElMessage.success('添加成功')
    await fetchAvailable()
    await fetchAssigned()
  } else {
    ElMessage.error('添加失败：' + resp.msg)
  }
}

// 移除一条分配
async function removeCustomer(row) {
  const { data: resp } = await axios.post(
    '/HealthManagerCustomerController/removeAssignment',
     qs.stringify({ customerId: row.id,managerId})
  )
  if (resp.status === 200) {
    ElMessage.success('移除成功')
    await fetchAvailable()
    await fetchAssigned()
  } else {
    ElMessage.error('移除失败：' + resp.msg)
  }
}

// 初始化
onMounted(async () => {
  await fetchAvailable()
  await fetchAssigned()
})
</script>

<style scoped>
.toolbar { margin-bottom:16px; }
</style>
